<template>
  <div>
    <div class="box">
      <div class="box0 box1"></div>
      <div class="box0 box2"></div>
      <div class="box0 box3"></div>
      <div class="box0 box4"></div>
      <div id="conch" style="width: 30rem; height: 15rem"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "MyVueEcharts5",

  data() {
    return {
      option: {
        title: {
          text: "境外输入病情top10省份",
          left: "center",
          textStyle: {
            color: "#ffffff",
            fontSize: 12,
            fontStyle: 100,
          },
        },

        series: {
          type: "pie",
          data: [
            {
              name: "上海",
              value: 130,
              // 标签样式
              label: {
                color: "#0057d6",
              },
              // 线的样式
              labelLine: {
                lineStyle: {
                  color: "#0057d6",
                },
              },
              // 图形的样式
              itemStyle: {
                color: "#0069f8",
              },
            },
            {
              name: "广东",
              value: 50,
              // 标签样式
              label: {
                color: "#459889",
              },
              // 线的样式
              labelLine: {
                lineStyle: {
                  color: "#459889",
                },
              },
              // 图形的样式
              itemStyle: {
                color: "#60cda0",
              },
            },

            {
              name: "黑龙江",
              value: 40,
              // 标签样式
              label: {
                color: "#ff9489",
              },
              // 线的样式
              labelLine: {
                lineStyle: {
                  color: "#ff9489",
                },
              },
              // 图形的样式
              itemStyle: {
                color: "#ed8884",
              },
            },
            {
              name: "四川",
              value: 30,
              // 标签样式
              label: {
                color: "#6f4f69",
              },
              // 线的样式
              labelLine: {
                lineStyle: {
                  color: "#6f4f69",
                },
              },
              // 图形的样式
              itemStyle: {
                color: "#ff9f7f",
              },
            },
            {
              name: "陕西",
              value: 26,
              // 标签样式
              label: {
                color: "#004094",
              },
              // 线的样式
              labelLine: {
                lineStyle: {
                  color: "#004094",
                },
              },
              // 图形的样式
              itemStyle: {
                color: "#0096ff",
              },
            },
            {
              name: "内蒙古",
              value: 20,
              // 标签样式
              label: {
                color: "#9ee5b8",
              },
              // 线的样式
              labelLine: {
                lineStyle: {
                  color: "#9ee5b8",
                },
              },
              // 图形的样式
              itemStyle: {
                color: "#9fe6b8",
              },
            },
            {
              name: "福建",
              value: 16,
              // 标签样式
              label: {
                color: "#269cca",
              },
              // 线的样式
              labelLine: {
                lineStyle: {
                  color: "#269cca",
                },
              },
              // 图形的样式
              itemStyle: {
                color: "#32c5e9",
              },
            },
            {
              name: "北京",
              value: 16,
              // 标签样式
              label: {
                color: "#1fa8ff",
              },
              // 线的样式
              labelLine: {
                lineStyle: {
                  color: "#1fa8ff",
                },
              },
              // 图形的样式
              itemStyle: {
                color: "#32c5e9",
              },
            },
            {
              name: "天津",
              value: 16,
              // 标签样式
              label: {
                color: "#ffaf83",
              },
              // 线的样式
              labelLine: {
                lineStyle: {
                  color: "#ffaf83",
                },
              },
              // 图形的样式
              itemStyle: {
                color: "#ffa07d",
              },
            },
            {
              name: "山西",
              value: 16,
              // 标签样式
              label: {
                color: "#0174d4",
              },
              // 线的样式
              labelLine: {
                lineStyle: {
                  color: "#0174d4",
                },
              },
              // 图形的样式
              itemStyle: {
                color: "#008fff",
              },
            },
          ],
          // 半径
          radius: [10, 70],
          // 南丁格尔图
          roseType: "radius",
        },
      },
    };
  },

  mounted() {
    let conch = document.querySelector("#conch");
    let obj = echarts.init(conch);
    obj.setOption(this.option);
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 31.25rem;
  height: 15.9375rem;
  border: .0625rem solid #06275b;
  position: relative;
  background-color: rgba(1, 11, 56, 0.1);
  margin-top: .625rem;
  .box0 {
    width: .625rem;
    height: .625rem;
  }
  .box1 {
    border-top: .0625rem solid #02a4b4;
    border-left: .0625rem solid #02a4b4;
  }
  .box2 {
    border-top: .0625rem solid #02a4b4;
    border-right: .0625rem solid #02a4b4;
    position: absolute;
    right: 0;
    top: 0;
  }
  .box3 {
    border-bottom: .0625rem solid #02a4b4;
    border-left: .0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .box4 {
    border-bottom: .0625rem solid #02a4b4;
    border-right: .0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>